*{
    /*清楚所有元素自带的边框*/
    padding: 0;
    margin: 0;
}
body{
    /*设置背景颜色*/
    background:#f5f5f5;
}
.wrap{
    width: 1200px;
    height: 650px;
    /*设置外边距，两个值分别是：上下，左右*/
    margin: 50px auto;
    /*设置内边距*/
    padding: 4px;
}
.items{
    width: 100%;
    height: 320px;
}
.item{
    /*设置左浮动*/
    float: left;
    width: 230px;
    height: 300px;
    /*设置文字对齐方式为居中对齐*/
    text-align: center;
    /*设置右外边距*/
    margin-right: 10px;
    /*设置上外边距*/
    margin-top: 2px;
    /*设置背景颜色*/
    background-color: #FFF;
    /*设置定位方式为相对定位*/
    position: relative;
    top: 0;
    /*设置溢出隐藏*/
    overflow: hidden;
    /*设置所有动画效果在0.5内完成*/
    transition: all.5s;
}
.item .comment{
    /*设置元素定位方式为绝对定位*/
    position: absolute;
    /*设置下偏移为-100px*/
    bottom: -100px;
    width: 100%;
    height: 70px;
    /*设置背景颜色*/
    background-color: #F60;
    /*设置所有动画效果在0.5秒内完成*/
    transition: all.5s;
}
.item .product .name{
    /*设置文字大小*/
    font-size: 14px;
    /*设置行高*/
    line-height: 3em;
}
.item .product .price{
    /*设置文字颜色*/
    color: #FF3113;
}
.item .comment .detail{
    /*设置上外边距*/
    margin-top: 10px;
    /*设置字体颜色*/
    color: #FFF;
    /*设置字体大小*/
    font-size: 12px;
}
.item .comment .user{
    /*设置上外边距*/
    margin-top: 5px;
    /*设置字体大小*/
    font-size: 12px;
    /*设置字体颜色*/
    color: #F9D8AA;
}
.item:hover{
    /*设置上偏移为-3px*/
    top: -3px;
    /*设置盒子阴影*/
    box-shadow: 0 0 15px #999;
    /*将鼠标指针变成小手*/
    cursor: pointer;
}
.item:hover .comment{
    /*为什么这个地方不用加hover?*/
    /*第一个为父级元素的hover状态下的子元素状态，前面表示状态，后面的子元素才是效果*/
    bottom: 0;
}
/*
实现文字在底部浮出的原理是
首先定义文字块相对于父级框也就是商品图片框绝对定位,然后将位置设置成-100px,隐藏起来
然后在最后设置当鼠标悬停在图片上时,将位置变成0,显示文字,并使用过渡效果优化浮出效果
*/